<template>
	<view class="qualityTestingDetail">
		<!-- 申诉状态 -->
		<view class="qualityTestingDetail_header_card">
			<view class="header_card_top">
				<view>
					<span> {{ qualityTest[qualityTestDetail.procedures] }} </span> 
					<span
						v-if="qualityTest[qualityTestDetail.procedures] === '已完成'"> | {{ result[qualityTestDetail.result] }}</span>
				</view>
			</view>
			<!-- <view class="header_card_center">
				<view>如有疑问可进行申诉</view>
			</view> -->
			<view class="header_card_bottom">
				<view></view>
				<view @click="goAppeal" v-if="qualityTestDetail.result == 2 && qualityTestDetail.isAppeal == 1">去申诉 >
				</view>
				<view @click="checkAppeal" v-if="qualityTestDetail.isAppeal == 2 ||  qualityTestDetail.isAppeal == 3">
					查看申诉详情 > </view>
			</view>
		</view>
		<!-- 基础信息列表 -->
		<qualityTestingDetailItem :qualityTestDetail="qualityTestDetail"></qualityTestingDetailItem>
		<!-- 去申诉弹出层 -->
		<view>
			<u-modal :show="goAppealShow" @confirm="goAppealConfirm" @cancel="goAppealCancel" @close="goAppealClose"
				closeOnClickOverlay ref="uModal" :asyncClose="true" :showCancelButton="true">

				<u--textarea v-model="checkAppealParams.pleaseAppeal" placeholder="申诉原因" height="100px" count
					maxlength="100"></u--textarea>

			</u-modal>
		</view>

		<!-- 查看申诉详情弹出层 -->
		<view>
			<u-modal :show="appealDetailShow" @confirm="appealDetailConfirm" @cancel="appealDetailCancel"
				@close="appealDetailClose" closeOnClickOverlay ref="uModal" :asyncClose="true">

				<view class="appealResult">
					<view class="slot-content">
						<view>申诉结果：</view>
						<rich-text :nodes="appealDetail.appealResultReason"></rich-text>
					</view>
					<view class="slot-content">
						<view>质检结果：</view>
						<rich-text :nodes="appealDetail.qualityTestResult" class="result_explain"></rich-text>
					</view>
				</view>


			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from "../../../utils/setTheme";
	import qualityTestingDetailItem from "../components/qualityTestingDetailItem/qualityTestingDetailItem.vue"
	import {
		checkAppealApi
	} from "@/api/qualityTest.js";
	let app = getApp();
	export default {
		components: {
			qualityTestingDetailItem,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				qualityTestDetail: {},
				// 质检的流程
				qualityTest: {
					1: '未开始',
					2: '质检中',
					3: '已完成',
					4: '已取消',
				},
				// 申诉的状态
				isAppeal: {
					1: '可申诉',
					2: '申诉中',
					3: '申诉完成',
					4: '已取消',

				},
				// 质检结果
				result: {
					1: '合格',
					2: '不合格',
					3: '暂无结果',
				},
				// 去申诉弹出层的显示
				goAppealShow: false,
				// 查看申诉详情
				appealDetailShow: false,

				// 查看申诉的params参数
				checkAppealParams: {
					testId: '',
				},
				appealDetail: {},


			}
		},
		onLoad(option) {
			this.qualityTestDetail = JSON.parse(option.goDetail)
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.checkAppealParams.testId = this.qualityTestDetail.testId
		},
		methods: {
			// 去申诉
			goAppeal() {
				this.goAppealShow = true;
			},
			// 关闭去申诉
			goAppealClose() {
				this.goAppealShow = false;
			},
			// 去申诉确认事件
			goAppealConfirm() {
				this.goAppealShow = false;
				// this.insertAppeal()
			},
			// 去申诉取消事件
			goAppealCancel() {
				this.goAppealShow = false;
			},


			
			// 关闭查看详情
			appealDetailClose() {
				this.appealDetailShow = false;
			},
			// 查看详情确认事件
			appealDetailConfirm() {
				this.appealDetailShow = false;
			},
			// 查看详情取消事件
			appealDetailCancel() {
				this.appealDetailShow = false;
			},
			// 查看申诉的功能函数
			async checkAppeal() {
					this.appealDetailShow = true;
				try {
					let result = await checkAppealApi(this.checkAppealParams)
					if (result.code === 200) {
						this.appealDetail = result.data
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}

			},
		},


	}
</script>

<style lang="scss" scoped>
	// 申请原因
	.appealResult {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.slot-content {
			display: flex;
			// justify-content: center;
			// align-items: center;
			padding: 20px;

			view {
				flex-shrink: 0;
			}
			.result_explain{
				line-height: 18px;
			}

		}
	}


	.qualityTestingDetail {
		background-color: #eee;

		.qualityTestingDetail_header_card {
			background-color: #fe5c2d;
			padding: 20px;

			.header_card_top {
				color: white;
				font-size: 20px;
				margin-bottom: 16px;
				span {
					margin-right: 10px;
				}
			}

			.header_card_center {
				color: white;
				margin-bottom: 16px;
			}

			.header_card_bottom {
				// background-color: white;
				color: white;
				padding: 10px;
				font-weight: bold;
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>